﻿<common:LayoutAwarePage x:Class="StoreAppLibDemo.Examples.Controls.TimePickerPage"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:common="using:StoreAppLibDemo.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:local="using:StoreAppLibDemo.Examples.Controls"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:storeAppControl="using:StoreAppLib.Controls"
                        mc:Ignorable="d">

    <Grid Style="{StaticResource AppPageStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="40" />
            <RowDefinition />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="1"
                   Margin="0,0,50,0"
                   Source="ms-appx:///Assets/PageLogo.png" />
            <TextBlock Margin="120,0,0,0"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Bottom"
                       Style="{StaticResource HeaderTextStyle}"
                       Text="Time Picker"
                       TextWrapping="Wrap" />
            <Button Margin="36,0,0,0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Bottom"
                    Click="GoBack"
                    Content="Button"
                    Style="{StaticResource BackButtonStyle}" />

        </Grid>

        <TextBlock Grid.Row="3"
                   Margin="0,0,50,0"
                   HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   FontSize="9"
                   Text="Copyright ©  2012 Suresh Kumar T" />
        <Grid Grid.Row="2" Margin="120,0,50,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="40" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Style="{StaticResource BodyTextStyle}" TextWrapping="Wrap">
                <Run>The TimePicker control is used to allow users to select time, and to display the time in specified format. The time will be displayed in a textbox. When user tap on the textbox, time picker control will be displayed to select a time. The control can be configured to select time automatically or by tapping on the select button. Based on the time format specified, the control will change its presentation to 24 hours or 12 hours format. Hour, minute and second can be scrolled cyclically.</Run>
                <LineBreak />
                <LineBreak />
                <Run>Tap on the timepicker textbox to select date</Run>
            </TextBlock>
            <StackPanel Grid.Row="2"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Orientation="Vertical">
                <CheckBox x:Name="autoSelect"
                          Margin="0,0,0,20"
                          VerticalAlignment="Stretch"
                          Content="Auto select time on change" />

                <StackPanel HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            Orientation="Horizontal">
                    <TextBlock Width="200"
                               Style="{StaticResource BodyTextStyle}"
                               Text="Time in 'HH:mm:ss' format :" />
                    <storeAppControl:TimePicker Width="150"
                                                Height="30"
                                                AutoSelect="{Binding ElementName=autoSelect,
                                                                     Path=IsChecked}"
                                                BorderBrush="Gray"
                                                BorderThickness="1"
                                                Format="HH:mm:ss"
                                                Time="{Binding CurrentTime,
                                                               Mode=TwoWay}" />
                </StackPanel>

            </StackPanel>

            <StackPanel Grid.Row="2"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Orientation="Horizontal">
                <TextBlock Width="200"
                           Style="{StaticResource BodyTextStyle}"
                           Text="Time in 'hh:mm:ss tt' format :" />
                <storeAppControl:TimePicker Width="150"
                                            Height="30"
                                            AutoSelect="{Binding ElementName=autoSelect,
                                                                 Path=IsChecked}"
                                            BorderBrush="Gray"
                                            BorderThickness="1"
                                            Format="hh:mm:ss tt"
                                            Time="{Binding CurrentTime,
                                                           Mode=TwoWay}" />
            </StackPanel>

            <StackPanel Grid.Row="2"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        Orientation="Horizontal">
                <TextBlock Width="200"
                           Style="{StaticResource BodyTextStyle}"
                           Text="Custom style :" />
                <storeAppControl:TimePicker Width="150"
                                            Height="30"
                                            AutoSelect="{Binding IsChecked,
                                                                 ElementName=autoSelect}"
                                            BorderBrush="Gray"
                                            BorderThickness="1"
                                            ButtonForeground="White"
                                            Format="hh:mm:ss tt"
                                            HeaderForeground="White"
                                            SurfaceBackground="#FF641414"
                                            Time="{Binding CurrentTime,
                                                           Mode=TwoWay}"
                                            TimeForeground="White">
                    <storeAppControl:TimePicker.InnerBorderBrush>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="Black" />
                            <GradientStop Offset="0.4" Color="#FFD1D1D1" />
                            <GradientStop Offset="1" Color="Black" />
                        </LinearGradientBrush>
                    </storeAppControl:TimePicker.InnerBorderBrush>
                    <storeAppControl:TimePicker.InnerBackground>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="#7F000000" />
                            <GradientStop Offset="0.5" Color="#7FFFFFFF" />
                            <GradientStop Offset="1" Color="#7F000000" />
                        </LinearGradientBrush>
                    </storeAppControl:TimePicker.InnerBackground>
                    <storeAppControl:TimePicker.OuterBackground>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="#7F000000" />
                            <GradientStop Offset="0.5" Color="#7FFFFFFF" />
                            <GradientStop Offset="1" Color="#7F000000" />
                        </LinearGradientBrush>
                    </storeAppControl:TimePicker.OuterBackground>
                    <storeAppControl:TimePicker.OuterBorderBrush>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="Black" />
                            <GradientStop Offset="0.4" Color="#FFD1D1D1" />
                            <GradientStop Offset="1" Color="Black" />
                        </LinearGradientBrush>
                    </storeAppControl:TimePicker.OuterBorderBrush>
                </storeAppControl:TimePicker>
            </StackPanel>
        </Grid>
    </Grid>
</common:LayoutAwarePage>